/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-08 16:44:00
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-09 11:48:40
 */
import classnames from 'classnames'
import { useHistory } from 'react-router'
import { NavBar, SearchBar } from 'antd-mobile'
import { useState, useRef, useEffect } from 'react'
import Icon from '@/components/Icon/Icon'
import styles from './index.module.scss'
import { useDebounceFn } from 'ahooks'
import { getSuggestion, delHistory, delAllHistory } from '@/store/actions/search'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'

import { highLight } from '@/utils/highLight'

import { addHistory } from '@/store/actions/search'
const SearchPage = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  const { suggestion, searchHistory } = useSelector((state: RootState) => state.search)
  const [keyword, setKeyword] = useState('')
  const { run: getSuggest } = useDebounceFn(
    (e: string) => {
      console.log('搜索功能', e)
      // 发送请求根据关键字
      dispatch(getSuggestion(e))
    },
    {
      wait: 500,
    }
  )
  const onChange = (key: string) => {
    setKeyword(key)
    clearTimeout(timerRef.current)
    getSuggest(key)
    // console.log(getSuggest, 99999);

    // timerRef.current = window.setTimeout(() => {
    //   // console.log(e)
    //   console.log(key)
    // }, 500)
  }
  // 存储防抖定时器
  const timerRef = useRef(-1)

  // 销毁组件时记得最好要清理定时器
  useEffect(() => {
    return () => {
      clearTimeout(timerRef.current)
    }
  }, [])

  const onSearch = (key: string) => {
    if (key.length === 0) return
    dispatch(addHistory(key))
    // 跳转页面
    history.push('/search/result?key=' + key)
  }
  /* 删除 */
  const delAll = () => {
    console.log(22333);
    dispatch(delAllHistory())
  }
  const delItem = (keyword: string) => {
    dispatch(delHistory(keyword))
  }
  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        onBack={() => history.go(-1)}
        right={<span className="search-text" onClick={() => onSearch(keyword)}>搜索</span>}
      >
        <SearchBar value={keyword} placeholder="请输入关键字搜索" onChange={str => onChange(str)} />
      </NavBar>
      == {keyword}
      {true && (
        <div
          className="history"
          style={{
            display: keyword.length ? 'none' : 'block'
          }}
        >
          <div className="history-header" >
            <span>搜索历史</span>
            <span onClick={delAll}>
              <Icon type="iconbtn_del" />
              清除全部
            </span>
          </div>

          <div className="history-list">
            {searchHistory.length > 0 && searchHistory.map((item, index) => (
              <span className="history-item" key={index} >
                <span className="text-overflow" onClick={() => onSearch(item)}>{item} </span>
                <Icon type="iconbtn_essay_close" onClick={() => delItem(item)} />
              </span>
            ))}

          </div>
        </div>
      )}

      <div className={classnames('search-result', keyword.length ? 'show' : '')}>
        {suggestion.length > 0 && suggestion.map((item, index) => {
          return (
            <div className="result-item" key={index}>
              <Icon className="icon-search" type="iconbtn_search" />
              <div
                onClick={() => history.push('/search/result?key=' + item)}
                className="result-value text-overflow"
                dangerouslySetInnerHTML={{
                  __html: highLight(item, keyword)
                }}
              ></div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default SearchPage